﻿<MCard
    MaxWidth="400"
    Class="mx-auto">
    <MTextarea
        @bind-Value="value"
        AutoGrow
        FullWidth
        Rows="2">
    </MTextarea>

    <MRow
        Class="px-2 pb-2 ma-0"
        Justify="JustifyTypes.SpaceBetween">
        <MButtonGroup
            @bind-Values="formatting"
            multiple>
            <MButton>
                <MIcon>mdi-format-italic</MIcon>
            </MButton>

            <MButton>
                <MIcon>mdi-format-bold</MIcon>
            </MButton>

            <MButton>
                <MIcon>mdi-format-underline</MIcon>
            </MButton>

            <MButton>
                <MRow
                    Align="AlignTypes.Center"
                    Class="flex-column"
                    Justify="JustifyTypes.Center">
                    <MIcon Class="cols 12">
                        mdi-format-color-text
                    </MIcon>

                    <MSheet
                        Tile
                        Style="margin-top: -4px;"
                        Height="4"
                        Width="26"
                        Color="purple">
                    </MSheet>
                </MRow>
            </MButton>
        </MButtonGroup>

        <MButtonGroup @bind-Value="alignment">
            <MButton>
                <MIcon>mdi-format-align-center</MIcon>
            </MButton>

            <MButton>
                <MIcon>mdi-format-align-left</MIcon>
            </MButton>

            <MButton>
                <MIcon>mdi-format-align-right</MIcon>
            </MButton>
        </MButtonGroup>
    </MRow>

    <MSheet
        Class="pa-4 text-center"
        Tile>
        <MRow
            Class="mb-2"
            Dense>
            @foreach (var n in numbers)
            {
                <MCol Class="text-caption grey--text text--darken-1">@n</MCol>
            }

        </MRow>

        <MRow dense>
            @foreach (var l in letters)
            {
                <MCol Class="text-h6 grey--text font-weight-regular text--darken-2">@l</MCol>
            }
        </MRow>
    </MSheet>
</MCard>


@code {

    StringNumber alignment = 1;
    List<StringNumber> formatting = new();
    List<int> numbers = new() {1, 2, 3, 4, 5, 6, 7, 8, 9, 0};
    List<string> letters = "q w e r t y u i o p".Split(" ").ToList();
    string value = "Toggle button requirements.\r\rHave at least three toggle buttons in a group\rLabel buttons with text, an icon, or";

}